<script setup>
import { ref, toRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { common, service } from '@utils'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { usePremission } from '@hooks'
import EditCom from './Edit'
import * as ElSvg from '@element-plus/icons-vue'

const premission = usePremission({
    add: 'manager:sysMenu:save',
    edit: 'manager:sysMenu:update',
    delete: 'manager:sysMenu:del'
})

const data = ref()
const loading = ref(false)
const tableRef = ref()
const editRef = ref()
const types = ref()

const getData = async () => {
    loading.value = true
    const res = await service.auth.menus()
    data.value = res
    loading.value = false
}

const getTypes = async () => {
    const res = await service.sys.dictionaryAll('menuType')
    types.value = res
}

const afterEditRow = (row) => {
    if (row.isUpdate) {
        getData()
        // for (let i = 0; i < data.value.length; i++) {
        //     if (data.value[i].id === row.id) {
        //         data.value[i] = { ...row }
        //         data.value = [...data.value]
        //         break
        //     }
        // }
    } else {
        // data.value.push(row)
        // tableRef.value.insert(row)
    }
}

const deleteRow = async (row) => {
    ElMessageBox.confirm('是否删除此记录', '提示', {
        type: 'warning'
    }).then(async () => {
        const res = await service.auth.menuDelete(row.id)
        if (res) {
            getData()
            ElMessage.success('删除成功')
            // for (let i = 0; i < data.value.length > 0; i++) {
            //     if (data.value[i].id === row.id) {
            //         data.value.splice(i, 1)
            //         break
            //     }
            // }
            // tableRef.value.remove(row)
        }
    })
}

getTypes()
getData()

const width = (function (premission) {
    let width = 24
    premission.delete && (width += 33)
    premission.edit && (width += 33)
    premission.add && (width += 33)
    return Math.max(width, 60)
})(premission)
</script>

<template>
    <section class="main-white">
        <div class="margin-bottom10">
            <el-button type="primary" :icon="Plus" @click="editRef.open({type:1})">添加</el-button>
        </div>
        <vxe-table ref="tableRef" :loading="loading" :data="data" :max-height="common.tableHeight(false, premission.add ? 1 : 0)"
            :tree-config="{transform: true, rowField: 'id', parentField: 'parentId'}" :column-config="{resizable: true}"
            :row-config="{keyField: 'id'}" :keep-source="true" highlight-hover-row round border>
            <vxe-column field="name" title="菜单名称" tree-node width="200" />
            <vxe-column field="icon" title="图标">
                <template #default="{ row }">
                    <el-icon class="el-svg-icon" v-if="row.icon">
                        <component :is="ElSvg[row.icon]" />
                    </el-icon>
                </template>
            </vxe-column>
            <vxe-column title="类型">
                <template #default="{ row }">
                    {{common.getValueByKey('value', row.menuType + '', types, 'label')}}
                </template>
            </vxe-column>
            <vxe-column field="sort" title="排序" />
            <vxe-column title="显示状态">
                <template #default="{ row }">
                    {{row.visible ? '显示' : '隐藏'}}
                </template>
            </vxe-column>
            <vxe-column field="shareable" title="共有状态">
                <template #default="{ row }">
                    {{row.shareable ? '共享' : '平台'}}
                </template>
            </vxe-column>
            <vxe-column title="操作" width="200" fixed="right">
                <template #default="{ row, $rowIndex }">
                    <section class="flex-align flex-wrap">
                        <el-tooltip v-if="premission.edit" effect="dark" content="修改" placement="top" :enterable="false">
                            <el-button type="primary" :icon="Edit" size="small" circle @click="editRef.open({...row, index: $rowIndex,type:2})">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip v-if="premission.add && row.menuType != 2" effect="dark" content="新增" placement="top"
                            :enterable="false">
                            <el-button type="primary" plain :icon="Plus" size="small" circle
                                @click="editRef.open({id: row.id, index: $rowIndex,type:3})">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip v-if="premission.delete" effect="dark" content="删除" placement="top" :enterable="false">
                            <el-button type="danger" :icon="Delete" size="small" circle @click="deleteRow(row)"></el-button>
                        </el-tooltip>
                    </section>
                </template>
            </vxe-column>
        </vxe-table>
        <edit-com ref="editRef" @refresh="afterEditRow" :menus="data" :types="types" />
    </section>
</template>